<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/index.css">
    <!-- bootstrap与侧边栏的h1标签凤凰教育属性有冲突，应该在自定义的css文件中的h1标签上用class选择，增加权重 -->
    <!-- 响应式实现没有使用bootsrap的栅格 -->
    <!-- <link rel="stylesheet" href="../lib/bootstrap/css/bootstrap.css"> -->
    <script src="../lib/echart/echart.js"></script>
</head>

<body>
    <!-- 侧边栏 -->
    <div class="slider">
        <div class="top">
            <h2 class="brand">凤凰教育</h2>
        </div>
        <img src="../images/avatar.png" alt="">
        <!-- 侧边菜单 -->
        <div class="menu">
            <ul>
                <li><img src="../images/icon1.png" alt=""><span>数据中心</span></li>
                <li><img src="../images/icon2.png" alt=""><span>学员管理</span></li>
                <li><img src="../images/icon3.png" alt=""><span>教师管理</span></li>
                <li><img src="../images/icon4.png" alt=""><span>课程管理</span></li>
                <li><img src="../images/icon5.png" alt=""><span>订单管理</span></li>
                <li><img src="../images/icon6.png" alt=""><span>财务管理</span></li>
                <li><img src="../images/icon7.png" alt=""><span>客服管理</span></li>
                <li><img src="../images/icon8.png" alt=""><span>系统设置</span></li>
            </ul>
        </div>
    </div>
    <div class="header">
        <!-- 菜单按钮 -->
        <div class="pull-left">
            <img src="../images/menu.png" alt="">
        </div>
        <!-- 考虑到右浮动的先后，于是把按钮图标提前 -->
        <div class="pull-right">
            <img class="attention" src="../images/icon.png" alt="">
            <img class="close" src="../images/close.png" alt="">
        </div>
        <!-- 搜索框 -->
        <div class="pull-center">
            <input type="text" placeholder="搜索">
        </div>
    </div>

    <!-- 内容部分 -->
    <div class="main">
        <!-- 统计数据 -->
        <div class="stastic">
            <div class="row">
                <div class="item ">
                    <div class="title title_1">学生人数
                        <span class="num">102.1</span>
                    </div>
                </div>
                <div class="item ">
                    <div class="title title_2">教师人数
                        <span class="num">902</span>
                    </div>
                </div>
                <div class="item">
                    <div class="title title_3">销售数量
                        <span class="num">102,125.00</span>
                    </div>
                </div>
                <div class="item ">
                    <div class="title title_4">视频数量
                        <span class="num">302,365.00</span>
                    </div>
                </div>
            </div>
        </div>
        <!-- 图表部分 -->
        <div class="chart">
            <div class="row">
                <!-- 左边的图表 -->
                <div class="row_left">
                    <div class="item item_1" id="item_1">
                        <!-- 表头信息 -->
                        <div class="headino">
                            <div class="left">
                                <span>成交量</span>
                                <span>访问量</span>
                            </div>
                            <div class="right">
                                <b>今日状况</b>
                                <b>最近15天</b>
                                <b>最近30天</b>
                            </div>
                        </div>
                        <!-- 图表显示盒子 -->
                        <div class="chart chart_1" id="chart_1">
                        </div>
                    </div>
                    <div class="item item_2">
                        <div class="headino">
                            <div class="left">
                                <span>各阶段分数报班人数</span>
                            </div>
                            <div class="right">
                                <b>2021-1-1</b>
                            </div>
                        </div>
                        <div class="chart chart_2" id="chart_2">
                        </div>
                    </div>
                </div>
                <div class="row_right">
                    <div class="item item_3">
                        <div class="headino">
                            <div class="left">
                                <span>实付金额</span>
                            </div>
                            <div class="right">
                                <b>2021-1-1</b>
                            </div>
                        </div>
                        <div class="chart chart_3" id="chart_3">
                        </div>
                    </div>
                    <div class="item item_4">
                        <div class="headino">
                            <div class="left">
                                <span>测试数</span>
                                <span>报班数</span>
                            </div>
                            <div class="right">
                                <b>2021-1-1</b>
                            </div>
                        </div>
                        <div class="chart chart_4" id="chart_4">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


</body>

<script>
    var option_1 = {
        xAxis: {
            type: 'category',
            data: ['2020-1-19', '2020-1-20', '2020-1-21', '2020-1-22', '2020-1-23', '2020-1-24', '2020-1-25']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            // 线条属性设置
            itemStyle: {
                normal: {
                    color: '#FFC254',
                    lineStyle: {
                        color: '#FFC254'
                    }
                }
            },
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            smooth: true
        },
        {
            itemStyle: {
                normal: {
                    color: '#6AB8FF',
                    lineStyle: {
                        color: '#6AB8FF'
                    }
                }
            },
            data: [120, 632, 401, 734, 1090, 930, 720],
            type: 'line',
            smooth: true
        }
        ]
    };

     var option_2 = {
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
            orient: 'vertical',
            left: 10,
            data: ['0-40分', '40-60分', '60-80分', '80-100分', '无分数']
        },
        series: [{
            name: '访问来源',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '30',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: [{
                value: 335,
                name: '0-40分'
            }, {
                value: 310,
                name: '40-60分'
            }, {
                value: 234,
                name: '60-80分'
            }, {
                value: 135,
                name: '80-100分'
            }, {
                value: 1548,
                name: '无分数'
            }]
        }]
    };

    var option_3 = {
        tooltip: {},
        xAxis: {
            type: 'category',
            data: ["06:00", "08:00", "10:00", "12:00", "16:00", "22:00", "24:00"]
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            name: '付款金额',
            itemStyle: {
                normal: {
                    color: '#C69EF7',
                }
            },
            data: [200, 600, 800, 620, 400, 1000, 800],
            type: 'bar'
        }]
    };

    var option_4 = {
        tooltip: {},
        radar: {
            // shape: 'circle',
            name: {
                // 雷达角的字属性
                textStyle: {
                    color: '#000000',
                    backgroundColor: '#fff',
                    borderRadius: 3,
                    padding: [3, 5]
                }
            },
            // 控制刻度显示
            axisLabel: {
                show: true,
                color: '#333',
                showMinLabel: false

            },

            indicator: [
                {
                    name: 'Java',
                    max: 100
                }, {
                    name: '数据库',
                    max: 100
                }, {
                    name: '前端',
                    max: 100
                }, {
                    name: '数据结构',
                    max: 100
                }, {
                    name: '小程序',
                    max: 100
                },
            ]


        },
        series: [{
            name: '预算 vs 开销（Budget vs spending）',
            type: 'radar',
            // areaStyle: {normal: {}},
            data: [
                {
                    value: [50, 70, 88, 95, 50, 19],
                    name: '预算分配（Allocated Budget）'
                },
                {
                    value: [50, 84, 58, 71, 42, 81],
                    name: '实际开销（Actual Spending）'
                }
            ]
        }],
        color: ['#fa610e', '#00aaee']
    };
    // 图表属性设置。并显示
    var chartDom_1 = document.getElementById('chart_1');
    var chartDom_2 = document.getElementById('chart_2');
    var chartDom_3 = document.getElementById('chart_3');
    var chartDom_4 = document.getElementById('chart_4');
    var myChart_1 = echarts.init(chartDom_1);
    var myChart_2 = echarts.init(chartDom_2);
    var myChart_3 = echarts.init(chartDom_3);
    var myChart_4 = echarts.init(chartDom_4);
    myChart_1.setOption(option_1);
    myChart_2.setOption(option_2);
    myChart_3.setOption(option_3);
    myChart_4.setOption(option_4);
</script>
</html>